<template>
  <div style="border: 1px solid #ccc">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
    <Editor  :="$attrs" style="height: 300px; overflow-y: hidden;" v-model="html" :defaultConfig="editorConfig" :mode="mode"
      @onCreated="handleCreated" />
  </div>

</template>

<script setup lang='ts'>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
const {
  toolbarConfig, editorConfig
} = withDefaults(defineProps<{
  toolbarConfig?: any;
  editorConfig?: any;
}>(), {
  toolbarConfig:()=>({}),
  editorConfig:()=>({ placeholder: '请输入内容...' })
})
const editorRef = shallowRef()
const mode = 'default'
const model = defineModel()
const html = computed({
  get() {
    return model.value
  }, set(val) {
    model.value = val;
  }
})

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}

</script>

<style></style>
